<template>
  <div class="app-container">
    <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px" size="small">
      <el-form-item label="商品品牌" prop="brandId">
        <el-input
          v-model="queryParams.brandId"
          clearable
          placeholder="请输入品牌ID"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="商品分类" prop="productCategoryId">
        <el-input
          v-model="queryParams.productCategoryId"
          clearable
          placeholder="请输入商品分类ID"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="商品名称" prop="name">
        <el-input
          v-model="queryParams.name"
          clearable
          placeholder="请输入商品名称"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="货号" prop="productSn">
        <el-input
          v-model="queryParams.productSn"
          clearable
          placeholder="请输入货号"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="上架状态" prop="publishStatus">
        <el-input
          v-model="queryParams.publishStatus"
          clearable
          placeholder="请输入货号"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="审核状态" prop="verifyStatus">
        <el-input
          v-model="queryParams.verifyStatus"
          clearable
          placeholder="请输入审核"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['system:product:add']"
          icon="el-icon-plus"
          plain
          size="mini"
          type="primary"
          @click="handleAdd"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['system:product:edit']"
          :disabled="single"
          icon="el-icon-edit"
          plain
          size="mini"
          type="success"
          @click="handleUpdate"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['system:product:remove']"
          :disabled="multiple"
          icon="el-icon-delete"
          plain
          size="mini"
          type="danger"
          @click="handleDelete"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['system:product:export']"
          icon="el-icon-download"
          plain
          size="mini"
          type="warning"
          @click="handleExport"
        >导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="productList" @selection-change="handleSelectionChange">
      <el-table-column align="center" label="主键ID" prop="id"/>
      <el-table-column align="center" label="商品图片" prop="pic">
        <template slot-scope="scope">
          <image-preview :height="50" :src="scope.row.pic" :width="50"/>
        </template>
      </el-table-column>
      <el-table-column align="center" label="商品名称" prop="name"/>
      <el-table-column align="center" label="价格" prop="price"/>
      <el-table-column align="center" label="货号" prop="productSn"/>
      <el-table-column align="center" label="上架">
        <template v-slot="scope">
          <el-switch
            v-model="scope.row.publishStatus"
            :active-value="0"
            :inactive-value="1"
            size="small"
            @change="handlePublishStatusChange(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>

      <el-table-column align="center" label="新品">
        <template v-slot="scope">
          <el-switch
            v-model="scope.row.newStatus"
            :active-value="0"
            :inactive-value="1"
            size="small"
            @change="handleNewStatusChange(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>

      <el-table-column align="center" label="推荐">
        <template v-slot="scope">
          <el-switch
            v-model="scope.row.recommandStatus"
            :active-value="0"
            :inactive-value="1"
            size="small"
            @change="handleRecommandStatusChange(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" label="排序" prop="sort"/>
      <el-table-column align="center" label="销量" prop="sale"/>
      <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
        <template slot-scope="scope">
          <el-button
            v-hasPermi="['system:product:edit']"
            icon="el-icon-edit"
            size="mini"
            type="text"
            @click="handleUpdate(scope.row)"
          >修改
          </el-button>
          <el-button
            v-hasPermi="['system:product:remove']"
            icon="el-icon-delete"
            size="mini"
            type="text"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :limit.sync="queryParams.pageSize"
      :page.sync="queryParams.pageNum"
      :total="total"
      @pagination="getList"
    />

    <!-- 添加或修改商品信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" append-to-body width="1000px">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-steps :active="active" finish-status="success">
          <el-step title="填写商品信息"></el-step>
          <el-step title="填写商品促销"></el-step>
          <el-step title="填写商品属性"></el-step>
          <el-step title="填写商品关联"></el-step>
        </el-steps>
        <span v-if="active == 0">
        <div>
          <el-form-item label="ID" prop="productCategoryId">
            <el-input v-model="form.productCategoryId" placeholder="请输入商品分类ID"/>
          </el-form-item>
          <el-form-item label="商品名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入商品名称"/>
          </el-form-item>
          <el-form-item label="副标题" prop="subTitle">
            <el-input v-model="form.subTitle" placeholder="请输入副标题"/>
          </el-form-item>
          <el-form-item label="品牌ID" prop="brandId">
            <el-input v-model="form.brandId" placeholder="请输入品牌ID"/>
          </el-form-item>
          <el-form-item label="商品描述" prop="description">
            <el-input v-model="form.description" placeholder="请输入内容" type="textarea"/>
          </el-form-item>
          <el-form-item label="货号" prop="productSn"><el-input v-model="form.productSn" placeholder="请输入货号"/>
          </el-form-item>
          <el-form-item label="价格" prop="price">
            <el-input v-model="form.price" placeholder="请输入价格"/>
          </el-form-item>
          <el-form-item label="市场价" prop="originalPrice">
            <el-input v-model="form.originalPrice" placeholder="请输入市场价"/>
          </el-form-item>
          <el-form-item label="库存" prop="stock">
            <el-input v-model="form.stock" placeholder="请输入库存"/>
          </el-form-item>
          <el-form-item label="单位" prop="unit">
            <el-input v-model="form.unit" placeholder="请输入单位"/>
          </el-form-item>
          <el-form-item label="商品重量" prop="weight">
            <el-input v-model="form.weight" placeholder="请输入商品重量，默认为克"/>克
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input v-model="form.sort" placeholder="请输入排序"/>
          </el-form-item>
        </div>
      </span><span v-if="active == 1">
        <el-form-item label="赠送的积分" prop="giftPoint">
          <el-input v-model="form.giftPoint" placeholder="请输入赠送的积分"/>
        </el-form-item>
        <el-form-item label="赠送的成长值" prop="giftGrowth">
          <el-input v-model="form.giftGrowth" placeholder="请输入赠送的成长值"/>
        </el-form-item>
        <el-form-item label="预告商品" prop="previewStatus">
          <el-radio v-model="form.previewStatus" :label=0>是</el-radio>
          <el-radio v-model="form.previewStatus" :label=1>否</el-radio>
        </el-form-item>
        <el-form-item label="商品上架" prop="publishStatus">
          <el-radio v-model="form.publishStatus" :label=0>是</el-radio>
          <el-radio v-model="form.publishStatus" :label=1>否</el-radio>
        </el-form-item>
        <el-form-item label="商品新品" prop="newStatus">
          <el-radio v-model="form.newStatus" :label=0>是</el-radio>
          <el-radio v-model="form.newStatus" :label=1>否</el-radio>
        </el-form-item>
        <el-form-item label="商品推荐" prop="recommandStatus">
          <el-radio v-model="form.recommandStatus" :label=0>是</el-radio>
          <el-radio v-model="form.recommandStatus" :label=1>否</el-radio>
        </el-form-item>
        <el-form-item label="服务保障" prop="serviceIds">
          <el-checkbox v-model="form.serviceIds" :label="0">无忧退货</el-checkbox>
          <el-checkbox v-model="form.serviceIds" :label="1">快速退款</el-checkbox>
          <el-checkbox v-model="form.serviceIds" :label="2">免费包邮</el-checkbox>
        </el-form-item>
        <el-form-item label="详情标题" prop="detailTitle">
          <el-input v-model="form.detailTitle" placeholder="请输入详情标题"/>
        </el-form-item>
        <el-form-item label="详情描述" prop="detailDesc">
          <el-input v-model="form.detailDesc" placeholder="请输入内容" type="textarea"/>
        </el-form-item>
        <el-form-item label="关键词" prop="keywords">
          <el-input v-model="form.keywords" placeholder="请输入关键词"/>
        </el-form-item>
        <el-form-item label="备注" prop="note">
          <el-input v-model="form.note" placeholder="请输入内容" type="textarea"/>
        </el-form-item>

        <el-form-item label="优惠方式" prop="preferentialMode">
          <el-radio-group v-model="form.preferentialMode">
            <el-radio-button label=0>无优惠</el-radio-button>
            <el-radio-button label=1>特惠促销</el-radio-button>
            <el-radio-button label=2>会员价格</el-radio-button>
            <el-radio-button label=3>阶梯价格</el-radio-button>
            <el-radio-button label=4>满减价格</el-radio-button>
          </el-radio-group>
        </el-form-item>

        <div>
          <span v-if="form.preferentialMode == 1">
              <el-form label-width="80px" :model="promotion">
                开始时间：<el-date-picker v-model="promotion.startime" placeholder="请选择开始时间"/><br/>
                结束时间：<el-date-picker v-model="promotion.endtime" placeholder="请选择结束时间"/><br/>
                促销价格：<el-input v-model="promotion.promotionalPrice" placeholder="请输入促销价格" style="width: 221px"/><br/>
              </el-form>
          </span>
          <span v-if="form.preferentialMode == 2">
            <el-form label-width="80px" :model="memberPrice">
                黄金会员：<el-input v-model="memberPrice.goldMember" placeholder="请输入黄金会员价格" style="width: 221px"/><br/>
                白金会员：<el-input v-model="memberPrice.platinumMember" placeholder="请输入白金会员价格" style="width: 221px"/><br/>
                钻石会员：<el-input v-model="memberPrice.diamondMember" placeholder="请输入钻石会员价格" style="width: 221px"/><br/>
            </el-form>
          </span>
          <span v-if="form.preferentialMode == 3">
            <template>
                  <el-table :data="createObj.tableData" border style="width: 49%">
                    <el-table-column prop="date" label="数量" width="150">
                       <template slot-scope="scope">
                        <el-input v-model="scope.row.aaa" placeholder="请输入数量"></el-input>
                       </template>
                    </el-table-column>
                    <el-table-column prop="name" label="折扣" width="150">
                        <template slot-scope="scope">
                        <el-input v-model="scope.row.bb" placeholder="请输入折扣力度"></el-input>
                       </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150">
                      <template slot-scope="scope">
                        <el-button @click="delFullDiscount(scope.row)" type="text" size="small">删除</el-button>
                        <el-button type="text" size="small" @click="addFullDiscount()">添加</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
          </span>
          <span v-if="form.preferentialMode == 4">
            <template>
                  <el-table :data="createObj.tableData" border style="width: 49%">
                    <el-table-column prop="date" label="满" width="150">
                       <template slot-scope="scope">
                        <el-input v-model="scope.row.aaa" placeholder="请输满"></el-input>
                       </template>
                    </el-table-column>
                    <el-table-column prop="name" label="立减" width="150">
                        <template slot-scope="scope">
                        <el-input v-model="scope.row.bb" placeholder="请输入立减"></el-input>
                       </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150">
                      <template slot-scope="scope">
                        <el-button @click="delFullDiscount(scope.row)" type="text" size="small">删除</el-button>
                        <el-button type="text" size="small" @click="addFullDiscount()">添加</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
          </span>
        </div>


      </span>
        <span v-if="active == 2">
          <el-form-item label="商品规格：">
            <el-card shadow="never" class="cardBg">
              <div v-for="(productAttr,idx) in selectProductAttr">
                {{productAttr.name}}：
                <el-checkbox-group v-if="productAttr.handAddStatus===0" v-model="selectProductAttr[idx].values">
                  <el-checkbox v-for="item in getInputListArr(productAttr.inputList)" :label="item" :key="item"
                               class="littleMarginLeft"></el-checkbox>
                </el-checkbox-group>
                <div v-else>
                  <el-checkbox-group v-model="selectProductAttr[idx].values">
                    <div v-for="(item,index) in selectProductAttr[idx].options" style="display: inline-block"
                         class="littleMarginLeft">
                      <el-checkbox :label="item" :key="item"></el-checkbox>
                      <el-button type="text" class="littleMarginLeft" @click="handleRemoveProductAttrValue(idx,index)">删除
                      </el-button>
                    </div>
                  </el-checkbox-group>
                  <el-input v-model="addProductAttrValue" style="width: 160px;margin-left: 10px" clearable></el-input>
                  <el-button class="littleMarginLeft" @click="handleAddProductAttrValue(idx)">增加</el-button>
                </div>
              </div>
            </el-card>
            <el-table style="width: 100%;margin-top: 20px"
                      :data="value.skuStockList"
                      border>
              <el-table-column
                v-for="(item,index) in selectProductAttr"
                :label="item.name"
                :key="item.id"
                align="center">
                <template slot-scope="scope">
                  {{getProductSkuSp(scope.row,index)}}
                </template>
              </el-table-column>
              <el-table-column
                label="销售价格"
                width="80"
                align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.price"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="商品库存"
                width="80"
                align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.stock"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="库存预警值"
                width="80"
                align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.lowStock"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="SKU编号"
                align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.skuCode"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                width="80"
                align="center">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click="handleRemoveProductSku(scope.$index, scope.row)">删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-button
              type="primary"
              style="margin-top: 20px"
              @click="handleRefreshProductSkuList">刷新列表
            </el-button>
            <el-button
              type="primary"
              style="margin-top: 20px"
              @click="handleSyncProductSkuPrice">同步价格
            </el-button>
            <el-button
              type="primary"
              style="margin-top: 20px"
              @click="handleSyncProductSkuStock">同步库存
            </el-button>
        </el-form-item>
          <el-form-item label="库存预警值" prop="lowStock">
            <el-input v-model="form.lowStock" placeholder="请输入库存预警值"/>
          </el-form-item>
          <el-form-item label="运费模板ID" prop="feightTemplateId">
            <el-input v-model="form.feightTemplateId" placeholder="请输入运费模板ID"/>
          </el-form-item>
          <el-form-item label="商品属性分类ID" prop="productAttributeCategoryId">
            <el-input v-model="form.productAttributeCategoryId" placeholder="请输入商品属性分类ID"/>
          </el-form-item>
          <el-form-item label="商品图片" prop="pic">
            <el-input v-model="form.pic" placeholder="请输入商品图片"/>
          </el-form-item>
          <el-form-item label="销量" prop="sale">
            <el-input v-model="form.sale" placeholder="请输入销量"/>
          </el-form-item>
          <el-form-item label="促销价格" prop="promotionPrice">
            <el-input v-model="form.promotionPrice" placeholder="请输入促销价格"/>
          </el-form-item>


          <el-form-item label="限制使用的积分数" prop="usePointLimit">
            <el-input v-model="form.usePointLimit" placeholder="请输入限制使用的积分数"/>
          </el-form-item>


          <el-form-item label="画册图片" prop="albumPics">
<!--            ，连产品图片限制为5张，以逗号分割-->
            <image-upload v-model="form.albumPics"/>
          </el-form-item>

          <el-form-item label="产品详情网页内容" prop="detailHtml">
            <el-input v-model="form.detailHtml" placeholder="请输入内容" type="textarea"/>
          </el-form-item>
        </span>
        <span v-if="active == 3">
            关联主题：
            <el-transfer
              filterable
              :filter-method="filterMethod"
              filter-placeholder="请输入城市拼音"
              v-model="value"
              :data="data">
            </el-transfer>
            关联优选：
            <el-transfer
              filterable
              :filter-method="filterMethod"
              filter-placeholder="请输入城市拼音"
              v-model="value2"
              :data="data">
            </el-transfer>
        </span>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="active > 0" style="margin-top: 12px;" @click="out">上一步</el-button>
        <el-button v-if="active < 3" style="margin-top: 12px;" @click="next">下一步</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">重置</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  updatePublishStatusData,
  updateNewStatusData,
  updateRecommandStatusData,
  listProduct,
  getProduct,
  delProduct,
  addProduct,
  updateProduct
} from "../../../api/system/product";
import {updateBrandStatusData} from "../../../api/system/brand";

export default {
  name: "Product",
  data() {
    const generateData = _ => {
      const data = [];
      const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
      const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];
      cities.forEach((city, index) => {
        data.push({
          label: city,
          key: index,
          pinyin: pinyin[index]
        });
      });
      return data;
    };
    return {
      data: generateData(),
      value: [],
      filterMethod(query, item) {
        return item.pinyin.indexOf(query) > -1;
      },
      active: 0,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 商品信息表格数据
      productList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      createObj:{
        tableData: [],
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        brandId: null,
        productCategoryId: null,
        feightTemplateId: null,
        productAttributeCategoryId: null,
        name: null,
        pic: null,
        productSn: null,
        deleteStatus: null,
        publishStatus: null,
        newStatus: null,
        recommandStatus: null,
        verifyStatus: null,
        sort: null,
        sale: null,
        price: null,
        promotionPrice: null,
        giftGrowth: null,
        giftPoint: null,
        usePointLimit: null,
        subTitle: null,
        description: null,
        originalPrice: null,
        stock: null,
        lowStock: null,
        unit: null,
        weight: null,
        previewStatus: null,
        serviceIds: null,
        keywords: null,
        note: null,
        albumPics: null,
        detailTitle: null,
        detailDesc: null,
        detailHtml: null,
        detailMobileHtml: null,
        promotionStartTime: null,
        promotionEndTime: null,
        promotionPerLimit: null,
        promotionType: null,
        brandName: null,
        productCategoryName: null,
        preferentialMode: null
      },
      // 表单参数
      form: {},
      // 商品特惠促销表
      promotion: {},
      // 商品会员价格表
      memberPrice: {},
      // 表单校验
      rules: {}
    };
  },
  created() {
    this.getList();
  },
  methods: {

    // 处理商品上架状态的变化
    handlePublishStatusChange(row) {
      let text = row.publishStatus === 0 ? "上架" : "不上架";
      this.$modal.confirm('确认要"' + text + ' ' + row.name + '"品牌吗？').then(() => {
        return updatePublishStatusData(row.id, row.publishStatus);
      }).then(() => {
        this.$modal.msgSuccess(text + "成功");
      }).catch(() => {
        row.publishStatus = row.publishStatus === 0 ? 1 : 0;
      });
    },
    // 处理商品新品状态的变化
    handleNewStatusChange(row) {
      let text = row.newStatus === 0 ? "新品" : "非新品";
      this.$modal.confirm('确认要把"' + row.name + '"设置为"' + text + '"吗？').then(() => {
        return updateNewStatusData(row.id, row.newStatus);
      }).then(() => {
        this.$modal.msgSuccess(text + "成功");
      }).catch(() => {
        row.newStatus = row.newStatus === 0 ? 1 : 0;
      });
    },// 处理商品推荐状态的变化
    handleRecommandStatusChange(row) {
      let text = row.recommandStatus === 0 ? "推荐" : "不推荐";
      this.$modal.confirm('确认要把"' + row.name + '"设置为"' + text + '"吗？').then(() => {
        return updateRecommandStatusData(row.id, row.recommandStatus);
      }).then(() => {
        this.$modal.msgSuccess(text + "成功");
      }).catch(() => {
        row.recommandStatus = row.recommandStatus === 0 ? 1 : 0;
      });
    },

    next() {
      if (this.active++ > 2) this.active = 0;
    },
    out() {
      if (this.active-- < 0) this.active = 2;
    },

    /** 查询商品信息列表 */
    getList() {
      this.loading = true;
      listProduct(this.queryParams).then(response => {
        this.productList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        brandId: null,
        productCategoryId: null,
        feightTemplateId: null,
        productAttributeCategoryId: null,
        name: null,
        pic: null,
        productSn: null,
        deleteStatus: null,
        publishStatus: null,
        newStatus: null,
        recommandStatus: null,
        verifyStatus: null,
        sort: null,
        sale: null,
        price: null,
        promotionPrice: null,
        giftGrowth: null,
        giftPoint: null,
        usePointLimit: null,
        subTitle: null,
        description: null,
        originalPrice: null,
        stock: null,
        lowStock: null,
        unit: null,
        weight: null,
        previewStatus: null,
        serviceIds: [],
        keywords: null,
        note: null,
        albumPics: null,
        detailTitle: null,
        detailDesc: null,
        detailHtml: null,
        detailMobileHtml: null,
        promotionStartTime: null,
        promotionEndTime: null,
        promotionPerLimit: null,
        promotionType: null,
        brandName: null,
        productCategoryName: null,
        preferentialMode: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加商品信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getProduct(id).then(response => {
        this.form = response.data;
        this.form.serviceIds = this.form.serviceIds.split(",");
        this.open = true;
        this.title = "修改商品信息";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.serviceIds = this.form.serviceIds.join(",");
          if (this.form.id != null) {
            updateProduct(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addProduct(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除商品信息编号为"' + ids + '"的数据项？').then(function () {
        return delProduct(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/product/export', {
        ...this.queryParams
      }, `product_${new Date().getTime()}.xlsx`)
    },

    /** 添加按钮操作 */
    handleAdd1() {
      //给满减优惠初始化数据
      this.createObj = {tableData: []}
      let tableData = {
        aaa: 0,
        bb: 0
      }
      this.createObj.tableData.push(tableData)

      //给属性类型下拉列表初始化数据
      //TODO  调用后台
      this.dialogVisibleAdd = true
      this.title = "添加品牌管理"
    },
    //再次添加一行满减记录
    addFullDiscount() {
      let tableData = {
        aaa: 0,
        bb: 0
      }
      this.createObj.tableData.push(tableData)
    },
    //删除一行满减记录
    delFullDiscount(data) {
      alert(JSON.stringify(data))
      alert(JSON.stringify(this.createObj))
    },


  }
};
</script>
